

/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */
async function setChannelList() {
  const result = await axios({ url: '/v1_0/channels' })
  // console.log(result.data.channels);
  const channels = result.data.channels
  const channelsStr = channels.map(item => {
    return `<option value="${item.id}">${item.name}</option>`
  }).join('')
  document.querySelector('.form-select').innerHTML = '<option value="请选择文章频道" selected="">请选择文章频道</option>' + channelsStr
}
setChannelList()
/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormData
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */
document.querySelector('.img-file').addEventListener('change', async e => {
  const fd = new FormData()
  if (!(e.target.files[0])) {
    document.querySelector('.img-file').value = null
    return
  }

  fd.append('image', e.target.files[0])
  // 2.3 单独上传图片并得到图片 URL 网址
  const result = await axios({
    url: '/v1_0/upload',
    method: 'POST',
    data: fd
  })
  // 2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
  const imgUrl = result.data.url
  document.querySelector('.rounded').src = imgUrl
  document.querySelector('.rounded').classList.add('show')
  document.querySelector('.place').classList.add('hide')
})
document.querySelector('.rounded').addEventListener('click', () => {
  //调用img-file点击事件的方法
  document.querySelector('.img-file').click()
})
/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
document.querySelector('.send').addEventListener('click', async e => {
  if (e.target.innerHTML !== '发布') return
  try {
    const form = document.querySelector('.art-form')
    const data = serialize(form, { hush: true, empty: true })
    delete data.id
    data.cover = {
      type: 1,//封面类型
      images: [
        document.querySelector('.rounded').src//封面图片url网址
      ]
    }
    const result = await axios({
      url: '/v1_0/mp/articles',
      method: 'POST',
      data: data,
    })
    myAlert(true, "添加成功")
    //只能清空表单数据，富文本域和图片不能清空
    form.reset()
    // 清空图片
    document.querySelector('.rounded').src = ''
    document.querySelector('.rounded').classList.remove('show')
    document.querySelector('.place').classList.remove('hide')
    // 清空富文本域
    editor.setHtml('')

    setTimeout(() => {
      location.href = '../content/index.html'
    }, 1500)
  } catch (err) {
    console.dir(err);

    myAlert(false, err.response.data.message)
  }
})
  /**
   * 目标4：编辑-回显文章
   *  4.1 页面跳转传参（URL 查询参数方式）
   *  4.2 发布文章页面接收参数判断（共用同一套表单）
   *  4.3 修改标题和按钮文字
   *  4.4 获取文章详情数据并回显表单
   */
  // *  4.2 发布文章页面接收参数判断（共用同一套表单）
  ; (async function () {
    //获取链接中?及之后的部分
    const paramStr = location.search
    //获取查询参数对象
    const params = new URLSearchParams(paramStr)
    //使用内置forEach方法，遍历key、value键值对
    //await会找最近的函数有没有被async修饰
    params.forEach(async (value, key) => {
      if (key === 'id') {
        document.querySelector('.title>span').innerHTML = `修改文章`
        document.querySelector('.send').innerHTML = `修改`
        document.querySelector('head>title').innerHTML = `修改文章`

        const res = await axios({
          url: `/v1_0/mp/articles/${value}`
        })
        const data = res.data
        //从后端响应数据中提出所需回显的数据
        const dataObj = {
          channel_id: data.channel_id,
          title: data.title,
          rounded: data.cover.images[0],
          content: data.content,
          id: data.id
        }
        console.log(dataObj);
        //一般Object.keys(dataObj)用于给name属性与响应数据key名相同的表单数据回显
        Object.keys(dataObj).forEach(key => {
          if (key === 'rounded') {
            //封面设置
            if (dataObj[key]) {
              document.querySelector('.rounded').src = dataObj[key]
              document.querySelector('.rounded').classList.add('show')
              document.querySelector('.place').classList.add('hide')
            }
          } else if (key === 'content') {
            editor.setHtml(dataObj[key])
          } else {
            document.querySelector(`[name=${key}]`).value = dataObj[key]
          }
        })
      }
    })

  })()
/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */
document.querySelector('.send').addEventListener('click', async e => {
  if (e.target.innerHTML !== '修改') return
  const form = document.querySelector('.art-form')
  const data = serialize(form, { hush: true, empty: true })
  try {
    const res = await axios({
      url: `/v1_0/mp/articles/${data.id}`,
      method: 'PUT',
      data: {
        ...data,
        cover: {
          type: document.querySelector('.rounded').src ? 1 : 0,
          images: [document.querySelector('.rounded').src]
        }
      }
    })
    myAlert(true, "修改文章成功")
    setTimeout(function () {
      location.href = '../content/index.html'
    }, 1500)
  } catch (err) {
    myAlert(false, err.response.data.message)
  }
})